<template>
	<div class="wrapper">
		<!--footer-->
		<ul class="footer">
			<li @click="goHome">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li>
				<i class="fa fa-compass"></i>
				<p>发现</p>
			</li>
			<li @click="toOrderList">
				<i class="fa fa-file-text-o"></i>
				<p>订单</p>
			</li>
			<li @click="toUserMenu">
				<!--此处跳转只是为了方便进入登录界面，后续会删除-->
				<i class="fa fa-user-o"></i>
				<p>我的</p>
			</li>
		</ul>
	</div>
</template>

<script>
	import {useRouter} from 'vue-router';
	export default {
		name:'Footer',
		setup() {
			const router = useRouter();
			const gotoPreviousPage = () => {
				router.back();
			};
			
			return {
				gotoPreviousPage
			};
		},
		methods:{
			goHome(){
				this.$router.push({path:'/index'});
			},
			toOrderList(){
				this.$router.push({path:'/orderlist'});
			},
			toUserMenu(){
				this.$router.push({path:'/userMenu'});
			}
		}
		
	};
</script>

<style>
	/***************footer****************/
	.wrapper .footer {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDDDDD;
		background-color: #FFFFFF;

		/*固定在底部 固定定位*/
		position: fixed;
		left: 0;
		bottom: 0;

		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.wrapper .footer li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		color: #999999;
		user-selcet: none;
		cursor: pointer;
	}

	.wrapper .footer li p {
		font-size: 2.8vw;
	}

	.wrapper .footer li i {
		font-size: 5vw;
	}
</style>
